<template>
  <div>
    <p>eat：{{ obj.hobby.eat}}</p>
    <button @click="obj.hobby.eat = '🍜'">面条</button>
    <button @click="obj.hobby = { eat: '🍜' }">面条2</button>
  </div>
</template>

<script>
import { watch, ref, reactive, isReactive } from 'vue';

export default {
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
        info: {
          address: '河南'
        }
      },
    })
    // ref 包裹的如果是一个对象，对象内部的复杂数据类型其实是一个 reactive 类型的数据
    // console.log(isReactive(obj.value.hobby))
    // 其实现在监听的是一个 reactive 类型数据，就符合监听 reactive 数据的特点
    watch(obj.value.hobby, () => {
      console.log(1)
    })
    return {obj}
  }
}
</script>

<style lang="scss" scoped>

</style>